<!--受理详情-->
<template>
  <div class="contain">
    <app-header></app-header>
    <div class="dt-head" :class="{add:todolist.BillState == 'P02'}">
      <div class="dt-head-fix">
        <template v-if="todolist.BillState == 'P02'">
          <detail-header :status="'请受理订单'" :id="todolist"></detail-header>
        </template>
        <template v-else>
          <detail-header :id="todolist"></detail-header>
        </template>
        <!--tab-->
        <!-- <div class="lltab mb10 ft14">
          <tab bar-active-color="#77babd" 
               defaultColor="#333333"
               active-color="#77babd"
               :line-width='2'>
            <tab-item selected 
              @on-item-click="tab=true">商品信息</tab-item>
            <tab-item 
              @on-item-click="tab=false">订单反馈</tab-item>
          </tab>
        </div>-->
      </div>
    </div>

    <div class="detail-tab-lft" v-if="tab">
      <div class="detail-supply" v-if="type==1">
        <i class="iconfont icon-supplier ft17"></i>
        {{todolist.SupplierName}}
      </div>
      <div class="detail-supply" v-else>
        <i class="iconfont icon-supplier ft17"></i>
        {{todolist.CargoOwnerName}}
      </div>
      <div class="detail-fedbck df-body-nopad" v-if="tododetail.length == 0">
        <voice-msg :id="todolist"></voice-msg>
      </div>

      <div class="detail-goods-list" v-if="type==1 || type==3">
        <div class="displayflex list-goods-warp" v-for="item in tododetail">
          <div class="pic">
            <img :src="item.PictContent | filterImgUrl">
          </div>
          <div class="msg flex1">
            <p class="ft17">{{item.SupplierGoodsName}}</p>
            <p>{{item.SupplierGoodsSpec}}</p>
            <p>{{item.Producer}}</p>
            <em class="def-color">
              共
              <span class="red">{{item.SupplierPoQty}}</span>
              {{item.SupplierUnit}}
            </em>
          </div>
        </div>
        <p class="detail-mark ft17" v-if="todolist.Memo">
          <em class="ft17">备注留言：</em>
          <i class="gray">{{todolist.Memo}}</i>
        </p>
        <div class="detail-num">
          <em>共{{todolist.DetailRecordSum}}种商品</em>小计:
          <span class="red">￥{{(amount) | fmoney}}</span>
        </div>
      </div>
      <div class="detail-goods-list" v-else>
        <div class="displayflex list-goods-warp" v-for="item in tododetail">
          <div class="pic">
            <img :src="item.PictContent | filterImgUrl">
          </div>
          <div class="msg flex1">
            <p class="ft17">{{item.GoodsName}}</p>
            <p>{{item.GoodsSpec}}</p>
            <p>{{item.Producer}}</p>
            <em class="def-color">
              共
              <span class="red">{{item.Pcks}}</span>
              {{item.Unit}}
            </em>
          </div>
        </div>
        <p class="detail-mark ft17" v-if="todolist.Memo">
          <em class="ft17">备注留言：</em>
          <i class="gray">{{todolist.Memo}}</i>
        </p>
        <div class="detail-num" v-if="type==1">
          <em>共{{todolist.DetailRecordSum}}种商品</em>小计:
          <span class="red">￥{{(amount) | fmoney}}</span>
        </div>
        <div class="detail-num" v-else>
          <em>共{{todolist.CountSum}}种商品</em>小计:
          <span class="red">￥{{(amount) | fmoney}}</span>
        </div>
      </div>
      <div class="detail-customs" v-if="type!=3">
        <p v-if="type==1">
          要求到货日期：{{todolist.PlanEndDate | time}}
          <span
            v-if="todolist.BillState!='P07' && todolist.BillState!='P10'"
          >（{{todolist.PlanEndDate | jsDateDiff}}）</span>
        </p>
         <p v-else>
          要求到货日期：{{todolist.PreArrivalDate | time}}
        </p>
        <p>下单时间：{{todolist.BillDate | timeshort}}</p>
      </div>
       <div class="detail-customs" v-else>
        <p>
          手术编号：{{todolist.SurgeryBillNo}}
        </p>
         <p>
          手术日期：{{todolist.SurgeryDate | time}}
        </p>
        <p>手术医生：{{todolist.Doctorname}}</p>
        <p>患者姓名：{{todolist.PatientName}}</p>
        <p>住院号：{{todolist.InHospitalNumber}}</p>
        <p>病床号：{{todolist.BEDNumber}}</p>
      </div>
      <div class="detail-bottom displayflex">
        <span>
          合计：
          <em class="red">￥{{(amount) | fmoney}}</em>
        </span>
      </div>
    </div>
    <template v-if="!tab">
      <feed-back :guid="todolist.Guid" :billno="todolist.BillNo"></feed-back>
    </template>
  </div>
</template>

<script>
import detailHeader from "@/components/core/header/detail_header.vue";
import feedBack from "@/components/share/billfb/billfb.vue";
import voiceMsg from "@/components/share/voiceMsg/voicemsg.vue";
import appHeader from "@/components/core/header/app_header.vue";
export default {
  name: "acceptDetail",
  components: {
    appHeader,
    detailHeader,
    feedBack,
    voiceMsg
  },
  data() {
    return {
      tab: true,
      tododetail: [],
      todolist: [],
      popupVisible: false,
      ua: navigator.userAgent.toLowerCase(),
      shares: null,
      isApp: false
    };
  },
  computed: {
    amount() {
      var total = 0;
      if (this.type == 1 || this.type == 3 ) {
        for (var i = 0; i < this.tododetail.length; i++) {
          total =
            total +
            this.tododetail[i].SupplierPrice * this.tododetail[i].SupplierPoQty;
        }
      } else if (this.type == 2 || this.type == 4) {
           for (var i = 0; i < this.tododetail.length; i++) {
          total =
            total +
            this.tododetail[i].Amount;
        }
      }

      return total;
    },
    guid() {
      return this.$route.query.id;
    },
    type() {
      return this.$route.query.type;
    },
    userinfo() {
      return JSON.parse(localStorage.userinfo);
    }
  },
  created() {
    if (this.type == 1) {
      this.getDate();
    } else if (this.type == 2 || this.type == 4) {
      this.getDateSS();
    }else{
      this.getDateSY();
    }
  },
  mounted() {
    this.$nextTick(function() {});
  },
  methods: {
    //获取高值送货、换货单详情
    getDateSS() {
      var self = this;
      var query = {
        Guid: this.guid
      };
      this.Ajax.post("getTrtplbbDetail", query).then(function(resp) {
        self.tododetail = resp.Datas;
      });
      this.Ajax.post("getTrtplbbGuid", query).then(function(resp) {
        self.todolist = resp.Data;
      });
    },
    //获取高值使用单详情
      getDateSY() {
      var self = this;
      var query = {
        Guid: this.guid
      };
      this.Ajax.post("getTrmedhvurDetail", query).then(function(resp) {
        self.tododetail = resp.Datas;
      });
      this.Ajax.post("getTrmedhvurGuid", query).then(function(resp) {
        self.todolist = resp.Data;
      });
    },
    //获取高值要货单详情
    getDate() {
      var self = this;
      var query = {
        Guid: this.guid
      };
      this.Ajax.post("getTrsupplierhvpoDetail", query).then(function(resp) {
        self.tododetail = resp.Datas;
      });
      this.Ajax.post("getTrsupplierhvpoGuid", query).then(function(resp) {
        self.todolist = resp.Data;
      });
    }
  }
};
</script>